<template>
	<view>
		<uni-popup ref="popup" type="center" background-color="#fff" borderRadius="30rpx 30rpx 0 0">
			<view class="boxs">
				<view class="title-sub flex-between">
					<span>解析</span>
					<u-icon name="close-circle-fill" color="#a0a6af" size="22" @click="close"></u-icon>
				</view>
				<view class="content">
					<view class="item-sheet" v-for="(items,index) in answerList" :key="items.id">
						<view>
							{{index+1}}.【正确答案】：{{items.detailInfo.correct_option}}
							【我的答案】：<span
								:class="items.detailInfo && items.asInfo.choose_as === items.detailInfo.correct_option ? 'greenColor' : 'redColor'">{{items.asInfo.choose_as}}</span>
						</view>
						<view style="margin:20rpx 0;display:flex">
							<view>【解析】</view>
							<view v-html="items.detailInfo.parse"></view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			answerList: {
				type: Array,
				defalut: []
			}
		},
		data() {
			return {
				totalQuestion: []

			};
		},
		watch: {

		},
		methods: {
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			// 选择单个题
			chooseItem(item, idx) {
				console.log(item, '选择单个题', idx);
				this.$emit('chooseItem', {
					index: idx,
					id: item.id
				})
				this.close()
			},
			// 交卷
			handIn() {


			}

		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.boxs {
		height: 75vh;
		position: relative;
		padding: 0rpx 35rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 35rpx;
	}

	.title {
		text-align: center;
		width: px_2_vw(375);
		height: px_2_vw(88);
		font-weight: bold;
		font-size: px_2_vw(40);
		margin: 0 auto;
		// left: 50%;
		// top: 2%;
		// left: 50%;
		// transform: translate(-50%,-50%);
		// position: absolute;
	}

	.title-sub {
		color: #a0a6af;
		font-size: px_2_vw(28);
		position: absolute;
		top: 30rpx;
		left: 35rpx;
		width: 97%;

		image {
			margin-right: 10rpx;
			width: px_2_vw(30);
			height: px_2_vw(30);
		}
	}

	.content {
		background: #fff;
		flex: 1;
		margin-top: 52rpx;
		border-radius: 41rpx;
		padding: 26rpx 0rpx;

		.item-sheet {
			padding: 20rpx 0;
			font-size: px_2_vw(24);

		}

		.line {
			height: px_2_vw(60);
			width: 1rpx;
			border-left: 1rpx solid #a0a6af;
			margin: 0 20rpx;
		}

		.title-type {
			width: px_2_vw(160);
		}

		.sheet-list {

			.item {
				width: px_2_vw(60);
				height: px_2_vw(60);
				border-radius: 50%;
				border: 1rpx solid #a0a6af;
				color: #a0a6af;
				margin-right: 30rpx;
			}
		}

	}

	.handIn {
		width: px_2_vw(260);
		height: px_2_vw(60);
		border-radius: 50rpx;
		color: #fff;
		background: #d9db58;
		margin: 0 auto;
		font-weight: 600;
	}

	.greenColor {
		color: #0F9F04 !important;
	}

	.redColor {
		color: #D11717 !important;
	}
</style>